<template>
    <div class="address_wrapper">
        <div class="header">
            <div class="header_left">
              <div class="iconfont back-icon" @click="handleAddressClick">&#xeb9d;</div>
            </div>
            <!-- <div class="header_right">
              新增地址
            </div> -->
            <div class="header_center">
              选择收货地址
            </div>
        </div>
        <div class="search_address">
          <div class="choose_city left" @click="handleCityClick">
            <span>{{this.city}}</span><span class="iconfont arrow">&#xe771;</span>
          </div>
          <div class="search_box right">
            <span class="iconfont" @click="postpois">&#xeba5;</span>
            <span class="iconfont clear" v-show="inputVaule" @click="clearInputVaule">&#xe62f;</span>
            <input class="search_input" type="text" placeholder="请输入地址" v-model="inputVaule" @keyup.enter="postpois" />
          </div>
        </div>
        <choose-address-list :placeList="placeList" :placeHistory="placeHistory" @change="nextpage(arguments)" @clear="clearAll"></choose-address-list>
        <choose-address-search v-show="inputVaule" :placeList="placeList" @change="nextpage(arguments)"></choose-address-search>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getStore, setStore, removeStore } from '@/assets/js/mUtils'
import ChooseAddressList from './components/List'
import ChooseAddressSearch from './components/Search'
export default {
  name: 'ChooseAddress',
  data () {
    return {
      inputVaule: '', // 搜索地址
      cityName: '选择收货地址', // 当前城市名字
      placeList: [], // 搜索城市列表
      placeHistory: [] // 历史搜索记录
    }
  },
  components: {
    ChooseAddressList,
    ChooseAddressSearch
  },
  methods: {
    handleAddressClick () {
      this.$emit('close')
    },
    handleCityClick () {
      this.$emit('open')
    },
    initData () {
      // 获取搜索历史记录
      if (getStore('placeHistory')) {
        this.placeHistory = JSON.parse(getStore('placeHistory'))
      } else {
        this.placeHistory = []
      }
    },
    // 发送搜索信息inputVaule
    postpois () {
      // 输入值不为空时才发送信息
      if (this.inputVaule) {
        this.$api.home.searchplace(this.cityId, this.inputVaule).then(res => {
          this.placeList = res.data
        })
      }
    },
    // 清除搜索信息inputVaule和搜索内容placeList
    clearInputVaule () {
      this.inputVaule = ''
      this.placeList = []
    },
    // 点击搜索结果进入下一页面时进行判断是否已经有一样的历史记录
    // 如果没有则新增，如果有则不做重复储存，判断完成后进入下一页
    nextpage (arg) {
      let index = arg[0]
      let geohash = arg[1]
      let history = getStore('placeHistory')
      let choosePlace = this.placeList[index]
      if (history) {
        let checkrepeat = false
        this.placeHistory = JSON.parse(history)
        this.placeHistory.forEach(item => {
          if (item.geohash === geohash) {
            checkrepeat = true
          }
        })
        if (!checkrepeat) {
          this.placeHistory.push(choosePlace)
        }
      } else {
        this.placeHistory.push(choosePlace)
      }
      setStore('placeHistory', this.placeHistory)
      this.$emit('close', geohash) // 实现跳转首页，并传参数geohash
      this.clearInputVaule()
      // this.$router.push({path: '/', query: {geohash}})
    },
    clearAll () {
      removeStore('placeHistory')
      this.initData()
    }
  },
  computed: {
    ...mapState(['city', 'cityId'])
  },
  mounted () {
    // 获取当前城市名字
    this.$api.home.currentcity(this.cityId).then(res => {
      this.cityName = res.data.name
    })
    this.initData()
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .address_wrapper
    height: 100vh
    background: #f5f5f5;
    font-size: .24rem
    position: fixed;
    top: 0
    left: 0
    right: 0
    bottom: 0
    z-index: 98
    .header
      height: .88rem
      line-height: .88rem
      font-weight: bold
      color: #fff
      padding: 0 .2rem
      text-align: center
      font-size: .34rem
      background-image: linear-gradient(90deg, #0af, #0085ff)
      position: relative
      .header_left, .header_right
        width: .40rem
        position: absolute
        top: 0
      .header_left
        left: .1rem
        .back-icon
          text-align: center
          font-size: .4rem
      .header_right
        width: 1.6rem
        right: .1rem
    .search_address
      display: flex
      height: 1.12rem
      line-height: 1.12rem
      background: #fff
      .choose_city
        width: 1.3rem
        padding-left: .3rem
        display: flex
        flex-direction: row
        justify-content: center
        span
          width: .8rem
          text-align: center
          ellipsis()
        .arrow
          width: auto
          font-size: 0.35rem;
          transform: scale(0.4)
      .search_box
        flex: 1
        padding: .2rem
        position: relative
        .iconfont
          font-size: .3rem
          line-height: .8rem
          padding: 0 .2rem
          position: absolute
        .clear
          color: #aaa
          right: .2rem
        .search_input
          width: 100%
          display: block
          line-height: .4rem
          padding: .18rem .2rem .18rem .6rem
          background: #f2f2f2
          box-sizing: border-box
</style>
